<template>
	<view id="sample">
		<uni-list>
			<view class="sub-title">
				<view>取样见证</view>
			</view>
			<uni-list-item clickable showArrow @click="takePicture" :border="false">
				<template v-slot:header>
					<view class="zljcIcon zljc-icon-erweima" style="font-size:64px;color:#1677FF;" v-if="!ewmImageSrc"></view>
					<view @click.stop="testPieceDemo(2)" v-else style="width: 64px;display: flex;justify-content: center;">
						<image :src="ewmImageSrc" mode="heightFix" style="height: 64px;"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="slot-body">
						<text class="slot-title">二维码标识照片</text>
						<view class="slot-font"><text>手持一组待植入的固定唯一标识二维码，唯一标识二维码清晰可见，背景图片为待取样植入唯一标识的一组试件。</text></view>
						<view class="slot-link" @click.stop="testPieceDemo(3)"><text>查看样例</text></view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item clickable showArrow @click="process" :border="false">
				<template v-slot:header>
					<view class="zljcIcon zljc-icon-suyuan" style="font-size:64px;color:#1677FF;" v-if="!processSrc"></view>
					<view v-else @click.stop="$refs.popup6.open('center')" style="width: 64px;display: flex;justify-content: center;">
						<image :src="processSrc" mode="heightFix" style="height: 64px;"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="slot-body">
						<text class="slot-title">取样过程照片</text>
						<view class="slot-font"><text>拍摄取样人员现场取样过程照片，能看到取样人员及样品，图片清晰。</text></view>
					</view>
				</template>
			</uni-list-item>
			
			<view class="help">
				<view class="help-text"><uni-icons type="" color="#333" size="18"/>封样见证</view>
				<picker @change="mePickerChange" :value="meIndex" :range="meOptions" range-key="name">
					<view class="uni-input">{{meOptions[meIndex].name}}</view>
					<uni-icons class="arrowright" type="arrowright" color="#bbb" size="16" />
				</picker>
			</view>
			<uni-list-item clickable showArrow @click="takeTestPiece" :border="false">
				<template v-slot:header>
					<view class="zljcIcon zljc-icon-jingquezhunque" style="font-size:64px;color:#1677FF;" v-if="imagesrc.length==0"></view>
					<view @click.stop="$refs.popup4.open('center')" class="test-piece" v-else>
						<image :src="imagesrc[imagesrc.length-1].url" mode="heightFix" style="height: 64px;"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="slot-body">
						<text class="slot-title">试件封样照片</text>
						<view class="slot-font"><text>要求唯一标识二维码值不得有遮挡及污损，唯一标识二维码及摸具清晰可见，且不能将其他试件二维码标识签植入图片中。</text></view>
						<view class="slot-link" @click.stop="testPieceDemo(5)"><text>查看样例</text></view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item clickable showArrow @click="takeVideo" :border="false"> 
				<template v-slot:header>
					<view class="zljcIcon zljc-icon-yingxiangguanli" style="font-size:50px;color:#1677FF;" v-if="!testVideoUrl"></view>
					<view style="width: 64px;height: 64px;" v-else>
						<video :src="testVideoUrl" id="video" style="width: 64px;height: 64px;" @play="handlePlay"></video>
					</view>
				</template>
				<template v-slot:body>
					<view class="slot-body">
						<text class="slot-title">试件音视频</text>
						<view class="slot-font"><text>视频中，试件清晰可见且能看到取样背景“录制时必须说xxx（姓名）xxx年xx月xx日上午/下午，在xxx工程完成xx检测类别，封样完成”。</text></view>
						<view class="slot-link" @click.stop="videoShow"><text>查看样例</text></view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<view class="bottom-nav"><button type="primary" class="btn" @click="save">保存</button></view>
		
		<!-- 创建照片画布-用于自定义水印、方框等 -->
		<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d" :style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'fixed', top: 0, left: '-'+canvasSiz.width+'px'}" />
		
		<!-- 点击按钮全屏播放视频 -->
		<view v-if="videoPlay">
		  <video
				controls
				id="testvideo"
				autoplay="true"
				:src="videoUrl"
				@fullscreenchange="screenChange"
		  ></video>
		</view>
		
		<!-- 试件照片已上传列表 -->
		<uni-popup ref="popup4" background-color="#fff">
			<scroll-view scroll-y="true" style="width: 260px;max-height: 500px;">
				<view class="preview-img" v-for="(image,index) in imagesrc" :key="index">
					<image :src="image.url" style="width: 240px;" mode="widthFix"></image>
					<uni-icons type="clear" size="20" color="#F56C6C" class="img-icon" @tap="delectImg(index)"></uni-icons>
				</view>
			</scroll-view>
		</uni-popup>
		
		<!-- 检测样品封样方法指南 -->
		<uni-popup ref="popup5" type="bottom" background-color="#fff">
			<scroll-view scroll-y="true" style="width: 100vw;max-height: calc(100vh - 90px);" @click="$refs.popup5.close()">
				<view style="width: 100vw;">
					<image src="@/static/img/sample/help1.png" mode="widthFix" style="width: 100vw;" v-if="meIndex==1"></image>
					<image src="@/static/img/sample/help2.png" mode="widthFix" style="width: 100vw;" v-if="meIndex==2"></image>
					<image src="@/static/img/sample/help3.png" mode="widthFix" style="width: 100vw;" v-if="meIndex==3"></image>
				</view>
			</scroll-view>
		</uni-popup>
		
		<!-- 取样过程已上传列表 -->
		<uni-popup ref="popup6" background-color="#fff">
			<scroll-view scroll-y="true" style="width: 260px;max-height: 500px;">
				<view class="preview-img" v-for="(image,index) in form.quyangFiles" :key="index">
					<image :src="image.url" style="width: 240px;" mode="widthFix"></image>
					<uni-icons type="clear" size="20" color="#F56C6C" class="img-icon" @tap="delectImgp(index)"></uni-icons>
				</view>
			</scroll-view>
		</uni-popup>
		
		<!-- 初始化页面提示 -->
		<uni-popup class="tips-popup" ref="tipsPopup" :mask-click="false" background-color="#fff">
			<view class="tips-title">温馨提示</view>
			<view class="tips-box">
				<text>1、见证人员应和取样人员同步进行取样检测过程拍摄； </text>
				<text>2、待取样人员提交检测信息后，见证人员方可进行检测信息核验；</text>
			</view>
			<view class="bottom-nav">
				<button type="primary" class="btn" @click="$refs.tipsPopup.close()">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { parseTime } from '@/common/util.js'
import { pathToBase64 } from '@/common/image-tools.js'
	
export default {
	data() {
		return {
			// 检测样品封样方法指南
			meOptions: [
				{ value: 0, name: '检测样品封样方法指南' }, 
				{ value: 1, name: '中小型固体和液体试件封样方法' }, 
				{ value: 2, name: '混凝土、砂浆试件封样方法' }, 
				{ value: 3, name: '大中型试件封样方法' }, 
			],
			meIndex: 0,
			// 二维码标识照片
			ewmImageSrc: '',
			// 试件照片
			imagesrc: [],
			// 取样过程照片
			processSrc: '',
			// 示例视频播放
			videoPlay: false,
			videoUrl: '',
			// 试件音视频
			testVideoUrl: '',
			// 画布大小
			canvasSiz:{
				width: 320,
				height: 300
			},
			// 表单提交
			form: {
				qrCodePhotos: '',				// 二维码标识照片
				specimenPhotos: [],			// 试件照片
				videoFiles: '',					// 试件音视频
				quyangFiles: []					//取样过程照片
			}
		};
	},
	onReady() {
		this.$nextTick(()=>{
			this.$refs.tipsPopup.open("center")
		})
	},
	methods: {
		// 保存
		save() {
			if (this.form.qrCodePhotos == '') {
				uni.showToast({ title: '请上传二维码标识照片', icon: 'none' })
				return false
			}
			if (this.form.quyangFiles.length == 0) {
				uni.showToast({ title: '请上传取样过程照片', icon: 'none' })
				return false
			}
			if (this.form.specimenPhotos.length == 0) {
				uni.showToast({ title: '请上传试件照片', icon: 'none' })
				return false
			}
			if (this.form.videoFiles == '') {
				uni.showToast({ title: '请上传试件音视频', icon: 'none' })
				return false
			}
			uni.setStorageSync('networkCheck', this.form)
			uni.showModal({
				showCancel: false,
				title: '保存成功，请在网络恢复后同步数据'
			})
		},
		// 提示选中
		mePickerChange(e) {
			this.meIndex = e.detail.value
			if (e.detail.value != 0) {
				this.$refs.popup5.open('center')
			}
		},
		// 拍摄试件照片
		takeTestPiece() {
			uni.navigateTo({
				url: '/pages/camera/camera?type=check'
			})
		},
		// 拍照二维码照片
		takePicture() {
			uni.navigateTo({
				url: '/pages/camera/watermark/watermark'
			})
		},
		//取样过程照片拍摄
		process(){
			uni.navigateTo({
				url: '/pages/camera/process'
			})
		},
		// 录视频
		takeVideo() {
			uni.chooseVideo({
				sourceType: ['camera'],
				success: res => {
					this.testVideoUrl = res.tempFilePath
					this.savePhoto(res.tempFilePath, 'videoFiles')
				},
				fail: err => {
					console.log('err: ', err);
				}
			});
		},
		// 播放试件音视频
		handlePlay(e) {
			let videoContext = uni.createVideoContext('video', this);
			videoContext.requestFullScreen({ direction: 90 });
		},
		// 试件照片查看样例
		testPieceDemo(type) {
			let imgsArray = [];
			if (type == 1) {
				imgsArray[0] = this.portraitImageSrc
			} else if (type == 2) {
				imgsArray[0] = this.ewmImageSrc
			} else if (type == 3) {
				imgsArray[0] = require("@/static/img/test/test2.jpg")
			} else if(type == 4){
				imgsArray=this.form.quyangFiles.map(res=>{
					return res.url
				})
			} else {
				imgsArray[0] = require("@/static/img/test/test3.jpg")
			}
			uni.previewImage({
				current: 0,
				urls: imgsArray
			})
		},
		// 移除试件照片
		delectImg(index) {
			this.imagesrc.splice(index, 1)
		},
		//取样过程照片移除
		delectImgp(index){
			this.form.quyangFiles.splice(index,1)
		},
		// 示例视频-查看样例
		videoShow() {
			this.videoPlay = true;
			this.videoUrl = require("@/static/video/test1.mp4")
			setTimeout(()=>{
				let videoContext = uni.createVideoContext('testvideo', this);
				videoContext.requestFullScreen({ direction: 90 });
			}, 200)
		},
		// 示例视频-全屏播放
		screenChange(e) {
			// 值true为进入全屏，false为退出全屏
		  let fullScreen = e.detail.fullScreen; 
		  if (!fullScreen) {
		    //退出全屏-隐藏播放盒子
		    this.videoPlay = false;   
		  }
		},
		// 处理水印照片
		setWatermarkImage(e) {
			let _this = this;
			uni.getImageInfo({
				src: e.path,
				success: function(image) {
					_this.canvasSiz.width =image.width;
					_this.canvasSiz.height =image.height;
					uni.showLoading({
						mask: true,
						title: '照片保存中...'  
					})
					// 设置重置尺寸生效延迟
					setTimeout(()=>{
						let ctx = uni.createCanvasContext('canvas-clipper', _this);
						ctx.drawImage(e.path, 0, 0, image.width, image.height);
						// 加水印文字
						ctx.setFillStyle('#17b914');
						ctx.setFontSize(32);
						ctx.fillText('二维码标识照片', 20, 60);
						// 加个时间水印
						ctx.setFontSize(32);
						ctx.fillText(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'), 20, 100);
						// 创建裁剪后图片		
						ctx.draw(false, () => {
							uni.canvasToTempFilePath(
								{
									destWidth: image.width,
									destHeight: image.height,
									canvasId: 'canvas-clipper',
									fileType: 'jpg',
									success: function(res) {
										uni.hideLoading();
										_this.ewmImageSrc = res.tempFilePath
										_this.savePhoto(res.tempFilePath, 'qrCodePhotos');
									}
								},
								_this
							);
						});
					}, 200)
				}
			});
		},
		// 处理试件照片
		testPiece(e) {
			let { path } = e;
			let _this = this;
			uni.getImageInfo({
				src: path,
				success: function(image) {
					_this.canvasSiz.width = image.width;
					_this.canvasSiz.height = image.height;
					uni.showLoading({
						mask: true,
						title: '照片保存中...'  
					})
					// 设置重置尺寸生效延迟
					setTimeout(()=>{
						let ctx = uni.createCanvasContext('canvas-clipper', _this);
						ctx.drawImage(path, 0, 0, _this.canvasSiz.width, _this.canvasSiz.height);
						// 添加文字水印
						ctx.setFillStyle('#17b914');
						ctx.setFontSize(32);
						ctx.fillText('试件照片', 20, 50);
						// 加个时间水印
						ctx.setFontSize(32);
						ctx.fillText(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'), 20, 100);
						// 创建转化分辨率后图片
						ctx.draw(false, () => {
							uni.canvasToTempFilePath({
								destWidth: image.width,
								destHeight: _this.canvasSiz.height,
								canvasId: 'canvas-clipper',
								fileType: 'jpg',
								success: function(res) {
									uni.hideLoading();
									_this.savePhoto(res.tempFilePath, 'specimenPhotos');
								}
							}, _this);
						});
					}, 200);
				}
			});
		},
		//保存取样过程照片
		processDate(e){
			let _this = this;
			uni.getImageInfo({
				src: e.path,
				success: function(image) {
					_this.canvasSiz.width =image.width;
					_this.canvasSiz.height =image.height;
					uni.showLoading({
						mask: true,
						title: '照片保存中...'  
					})
					// 设置重置尺寸生效延迟
					setTimeout(()=>{
						let ctx = uni.createCanvasContext('canvas-clipper', _this);
						ctx.drawImage(e.path, 0, 0, image.width, image.height);
						// 加水印文字
						ctx.setFillStyle('#17b914');
						ctx.setFontSize(32);
						ctx.fillText('取样过程照片', 20, 60);
						// 加个时间水印
						ctx.setFontSize(32);
						ctx.fillText(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'), 20, 100);
						// 创建裁剪后图片		
						ctx.draw(false, () => {
							uni.canvasToTempFilePath(
								{
									destWidth: image.width,
									destHeight: image.height,
									canvasId: 'canvas-clipper',
									fileType: 'jpg',
									success: function(res) {
										uni.hideLoading();
										_this.processSrc = res.tempFilePath
										_this.savePhoto(res.tempFilePath, 'process');
									}
								},
								
							);
						});
					}, 200)
				}
			});
		},
		//保存图片到相册，方便核查
		savePhoto(path, type){
			pathToBase64(path).then(res=>{
				if (type == 'qrCodePhotos') {
					this.form.qrCodePhotos = res
				} else if (type == 'specimenPhotos') {
					this.imagesrc.push({url:res})
					this.form.specimenPhotos.push(res)
				} else if (type == 'videoFiles') {
					this.form.videoFiles = res
				} else if (type == 'process') {
					this.form.quyangFiles.push(res)
				}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
#sample {
	padding: 10px 0 60px 0;
	background-color: #fafafa;
	min-height: calc(100vh - 44px);

	.uni-list {
		.test-piece {
			width: 64px;
			height: 64px;
			display: flex;
			overflow: hidden;
			justify-content: center;
		}
		.help {
			height: 42px;
			display: flex;
			padding: 0 10px;
			position: relative;
			align-items: center;
			border-top: 1rpx solid #eee;
			border-bottom: 1rpx solid #eee;
			
			.help-text {
				white-space: nowrap;
			}
			uni-picker {
				flex: 1;
				
				.uni-input {
					font-size: 12px;
					text-align: right;
					padding-right: 30px;
				}
				.arrowright {
					padding-right: 10px;
				}
			}
			.arrowright {
				right: 0;
				top: 12px;
				position: absolute;
			}
		}
		.sub-title{
			padding: 0 10px;
			line-height: 42px;
			border-bottom: 1rpx solid #eee;
			uni-text{
				white-space: nowrap;
			}
		}
		.slot-box {
			.slot-image {
				width: 46px;
				height: 46px;
				border-radius: 4px;
				border: 3px solid #407ffe;
			}
		}
		.slot-body {
			flex: 1;
			padding: 6px 0;
			font-size: 16px;
			margin-left: 20px;

			.slot-text {
				color: #e1e2e4;
				margin-top: 6px;
			}
			.slot-font {
				color: #b3b3b3;
				font-size: 12px;
				margin-top: 6px;
			}
			.slot-link {
				color: #007aff;
				font-size: 12px;
				margin-top: 6px;
			}
		}
	}
	.bottom-nav {
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 50px;
		padding: 10px;
		position: fixed;
		background-color: #fff;
		box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
	}
	
	.tips-popup{
		/deep/.uni-popup__wrapper{
			border-radius: 5px;
		}
		.tips-title{
			font-size: 18px;
			text-align: center;
			line-height: 36px;
			border-bottom: 1rpx solid #eee;
			
		}
		.tips-box{
			width: 70vw;
			padding: 10px 13px;
			padding-bottom: 60px;
			uni-text{
				display: block;
				font-size: 14px;
			}
		}
		.bottom-nav {
			left: 0;
			bottom: 0;
			width: 100%;
			height: 50px;
			padding: 10px;
			position: absolute;
			background-color: #fff;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);
		}
	}
	
	.preview-img {
		margin: 10px;
		width: 240px;
		display: flex;
		position: relative;
		align-items: center;
		
		.img-icon {
			top: 10px;
			right: 10px;
			font-size: 20px;
			position: absolute;
		}
	}
	
	.imges {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		
		.img {
			margin-right: 16.42rpx;
			width: 30%;
			image{
				width: 100%;
			}
		}
	}
}
</style>
